var processor = {
    fixViewport: function (type, width) {
        var docEl = document.documentElement;
        var metaEl = document.querySelector('meta[name="viewport"]');
        var clientWidth = Math.min(docEl.clientWidth, docEl.clientHeight);
        var scale, content;
        
        switch (type) {
            case 'fixed':
                scale = clientWidth / width;
                content = 'width=' + width + ',initial-scale=' + scale + ',maximum-scale=' + scale +
                    ',minimum-scale=' + scale;
                break;
            case 'rem':
                var dpr = window.devicePixelRatio || 1;
                docEl.setAttribute('data-dpr', dpr);
                docEl.style.fontSize = 100 * (clientWidth * dpr / width) + "px";

                scale = 1 / dpr;
                content = 'width=' + clientWidth * dpr + ',initial-scale=' + scale + ',maximum-scale=' + scale +
                    ', minimum-scale=' + scale;
                break;
        }
        
        metaEl.setAttribute('content', content);
    },
    doLoad: function(){
        var _this = this;
        var arrImg = ['img/bg1.jpg', 'img/bg2.jpg', 'img/bg3.jpg', 'img/bg4.jpg', 'img/bg7.jpg', 'img/bg8.jpg', 'img/bg9.jpg','img/e-sprite.png', 'img/txt-sprite.png', 'img/player.png', 'img/next.png', 'img/qrcode.jpg'];
        var total = arrImg.length, index = 0;

        function loadImage(url, callback){
            var img = new Image();
            img.src = url;
            
            if (img.complete) {
                callback();
                return;
            }
            img.onload = function () {
                callback();
                return;
            }
            img.onerror = function () {
                callback();
                return;
            }
        }

        function success(){
            if(index < total){
                index++;
            }
            var num = parseInt(index/total * 100);
            $('#progress .percent').html(num+' %');

            if(index == total){
                setTimeout(function(){
                    _this.main();
                    _this.initMusic('media/music.mp3');
                },500)
                clearInterval(timeImage);
            }
        }

        var timeImage = setInterval(function(){
            loadImage(arrImg[index], success);
        }, 100);        
    },
    main: function(){
        $('#progress').hide();

        Zepto(function($){
            window.pageSlide = new mo.Slide({
                target: $('#pages .page'),
                touchMove: false
            });

            var totalPage = $('#pages > .page').length;

            $('#pages').on('swipeUp', function() {
                if(pageSlide.curPage < totalPage-1){
                    pageSlide.next();
                }
            })
            .on('swipeDown', function() {
                if(pageSlide.curPage !=0){
                    pageSlide.prev();
                }
            })
            .on('touchmove', function() {
                event.preventDefault();
            })

            $('#play').on('click', function(){
                $('#frame').show();
            })
            $('#skip').on('click', function(){
                $('#frame').hide();
                pageSlide.next();
            })
        });

    },
    initMusic: function(url){
        var options = {
            autoplay: true,
            loop: true,
            src: url
        }
        if(!options.src){
            return
        }
        var className = 'on',
            music = document.getElementById('music'),
            trigger = 'ontouchstart' in window ? 'touchstart' : 'click',
            audio = document.createElement('audio');
        audio.src = options.src;

        /*function start() {
            document.removeEventListener(trigger, start, false)
            if (!audio.paused)
                return
            audio.play()
        }*/

        function toggle(e) {
            e.stopPropagation()
            !audio.paused ? audio.pause() : audio.play()
        }

        function play(e) {
            $(music).addClass(className);
        }

        function pause(e) {
            $(music).removeClass(className);
        }

        audio.addEventListener('play', play, false);
        audio.addEventListener('pause', pause, false);
        music.addEventListener(trigger, toggle, false);

        if (options.loop) {
            audio.loop = 'loop';
        } else {
            audio.addEventListener('ended', pause, false);
        }

        if (options.autoplay) {
            audio.play()
            // document.addEventListener(trigger, start, false)
        }

        $(music).show()
            return audio
    }
}

processor.fixViewport('fixed', 640);
window.onload = function() {
    processor.doLoad();
}